<template>

  <el-dialog v-model="dialogTableVisible" :title="name as String +'的简历'" width="860px" @close="handleColse">
    <div class="preview">
      <div class="resume">
        <div class="left">
          <div class="image-wrapper">
            <img src="http://img03.51jobcdn.com/im/2016/resume/man.png">
          </div>
          <div class="base-info wrapper">
            <span>年龄：{{age}}岁</span>
            <span>居住地：{{newAddress}}</span>
            <span>政治面貌：{{politicalOutlook}}</span>
            <span>手机号：{{phone}}</span>
            <span>邮箱：{{email}}</span>
          </div>
          <div class="specialty wrapper">
            <h2 class="title">技能特长</h2>
            <div class="list">
              <div class="item">
                <span class="name">Android</span>
                <div class="level">
                  <el-progress :percentage="80"><span>精通</span></el-progress>
                </div>
              </div>
              <div class="item">
                <span class="name">Html</span>
                <div class="level">
                  <el-progress :percentage="80"><span>精通</span></el-progress>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <!-- 姓名信息 -->
          <div class="name-wrapper wrapper">
            <h1>{{name}}</h1>
            <!-- <span >111</span> -->
          </div>
          <!-- 求职意向 -->
          <div class="job-intention wrapper">
            <h2 class="title">求职意向</h2>
            <div class="intention">
              <span>期望职位：{{jobTitle}}</span>
              <span>期望行业：{{jobIndustry}}</span>
              <span>期望薪资：{{jobSalary}}元/月</span>
            </div>
          </div>
          <!-- 教育背景 -->
          <div class="education wrapper" v-if="true">
            <h2 class="title">教育背景</h2>
            <div class="list">
              <div class="item">
                <div class="title">
                  <span>{{schoolTime}}</span>
                  <span>{{eduSchoolName}}</span>
                  <span>{{eduEducation}}</span>
                  <span>{{eduMajorDetail}}</span>
                </div>
                <span class="desc">主修课程：{{eduMajorDetail?eduMajorDetail:"未填写具体的主修课程简介"}}</span>
              </div>
            </div>
          </div>
          <!-- 实习经历 -->
          <div class="internship wrapper" v-if="true">
            <h2 class="title">工作经历</h2>
            <div class="list">
              <div class="item">
                <div class="title">
                  <span>{{jobExTime}}</span>
                  <span>{{jobExEnterprise}}</span>
                  <span>{{jobExLevel}}</span>
                </div>
                <span class="desc">工作简介：{{jobExDetail?jobExDetail:"未填写具体的工作简介"}}</span>
              </div>
            </div>
          </div>
          <!-- 项目经验 -->
          <div class="projects wrapper" v-if="true">
            <h2 class="title">项目经验</h2>
            <div class="list">
              <div class="item">
                <div class="title">
                  <span>{{projectTime}}</span>
                  <span>{{projectEnterprise}}</span>
                  <span>{{projectName}}</span>
                </div>
                <span class="desc">项目简介：{{projectDetail?projectDetail:"未填写具体的项目简介"}}</span>
              </div>
            </div>
          </div>
          <!-- 荣誉奖项 -->
          <div class="honors wrapper" v-if="true">
            <h2 class="title"   >荣誉奖项</h2>
            <div style="margin-top: 10px;" v-for="(item,index) in userHonors"  :key="index">
              <span class="honor" style="margin-top: 10px; float: left; margin-right: 10px;" >
                {{item}} 
              </span>
          
            </div>
            
          </div>
          <!-- 自我评价 -->
          <div class="self-evaluation wrapper">
            <h2 class="title">自我评价</h2>
            <span class="evaluation">{{userSelfEvaluation}}</span>
          </div>
        </div>
      </div>
    </div>

  </el-dialog>

  <!-- <el-button text @click="dialogTableVisible = true">open a Table nested Dialog</el-button> -->
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, onUnmounted, onBeforeUnmount, onBeforeMount, reactive,computed } from "vue"
import { useStore } from "vuex"
import { getEUserResume } from "@/api/enterpriseApi"
import { data, elmessage } from "@/hook/hook"
import { useRouter } from "vue-router"
export default defineComponent({
  props: ["handleCloseResume", "userInfo"],
  setup(props: any, context: any) {
    const store = useStore()
    const router = useRouter()
    const dialogTableVisible = ref(false)
    const handleColse = () => {
      context.emit("handleCloseResume")
    }
    interface UserResume {
      "uId": string
      "gander": string
      "name": string
      "birth": string
      "newAddress": string
      "politicalOutlook": string
      "phone": string
      "email": string

      "jobTitle": string
      "jobSalary": string
      "jobIndustry": string

      "schoolTime": string
      "eduSchoolName": string
      "eduMajor": string
      "eduEducation": string
      "eduMajorDetail": string

      "jobExTime": string
      "jobExEnterprise": string
      "jobExLevel": string
      "jobExDetail": string


      "projectTime": string
      "projectEnterprise": string
      "projectName": string
      "projectDetail": string

      "userHonors": string
      "userSelfEvaluation": string
    }

    // const  userResume:UserResume[]=reactive([])
    const userResume=store.state.previewResumeState.userResume

    const initData={
      name:computed(()=>userResume.name),
      gander:computed(()=>userResume.gander),
      newAddress:computed(()=>userResume.newAddress),
      age:computed(()=>store.getters.getUserAge),
      politicalOutlook:computed(()=>userResume.politicalOutlook),
      phone:computed(()=>userResume.phone),
      email:computed(()=>userResume.email),

      jobTitle:computed(()=>userResume.jobTitle),
      jobSalary:computed(()=>userResume.jobSalary),
      jobIndustry:computed(()=>userResume.jobIndustry),

      schoolTime:computed(()=>userResume.schoolTime),
      eduSchoolName:computed(()=>userResume.eduSchoolName),
      eduMajor:computed(()=>userResume.eduMajor),
      eduEducation:computed(()=>userResume.eduEducation),
      eduMajorDetail:computed(()=>userResume.eduMajorDetail),

      jobExTime:computed(()=>userResume.jobExTime),
      jobExEnterprise:computed(()=>userResume.jobExEnterprise),
      jobExLevel:computed(()=>userResume.jobExLevel),
      jobExDetail:computed(()=>userResume.jobExDetail),

      projectTime:computed(()=>userResume.projectTime),
      projectEnterprise:computed(()=>userResume.projectEnterprise),
      projectName:computed(()=>userResume.projectName),
      projectDetail:computed(()=>userResume.projectDetail),

      userHonors:computed(()=>userResume.userHonors),
      userSelfEvaluation:computed(()=>userResume.userSelfEvaluation),

    }

    const init =async () => {
      const newData = {
        ...data(),
        uId: props.userInfo.uId
      }
     await getEUserResume(newData).then((res: any) => {
        if (res.data["code"] == "200") {
         // 基本信息
        userResume.uId = res.data.uId
        userResume.name = res.data.name
        userResume.gander = res.data.gander
        userResume.birth = res.data.birth
        userResume.newAddress = res.data.newAddress
        userResume.politicalOutlook = res.data.politicalOutlook
        userResume.phone = res.data.phone
        userResume.email = res.data.email

        // 求职意向
        userResume.jobTitle = res.data.jobTitle
        userResume.jobSalary = res.data.jobSalary
        userResume.industry = res.data.jobIndustry
        // 教育经历
        userResume.eduSchoolName = res.data.eduSchoolName
        userResume.eduEducation = res.data.eduEducation
        userResume.eduMajor = res.data.eduMajor
        userResume.schoolTime = res.data.schoolTime
        userResume.eduMajorDetail = res.data.eduMajorDetail

        // 工作经历
        userResume.jobExTime = res.data.jobExTime
        userResume.jobExEnterprise = res.data.jobExEnterprise
        userResume.jobExLevel = res.data.jobExLevel
        userResume.jobExDetail = res.data.jobExDetail
        // 项目经验
        userResume.projectTime = res.data.projectTime
        userResume.projectEnterprise = res.data.projectEnterprise
        userResume.projectName = res.data.projectName
        userResume.projectDetail = res.data.projectDetail

        // 荣誉奖项
        userResume.userHonors = res.data.userHonors
        // 自我评价
        userResume.userSelfEvaluation = res.data.userSelfEvaluation
        dialogTableVisible.value=true
        } else if (res.data["code"] == "300") {
          elmessage(res.data["message"], res.data["type"])
          setTimeout(() => {
            router.replace("/login")
          }, 500);
          localStorage.clear()
        } else {
          console.log(res.data);
        }

      })

    }
    onBeforeMount(async () => {
     await init()
    await initData
     
     

    })
    
    return {
      dialogTableVisible,
      ...initData,
      handleColse,
    };
  },
});
</script>

<style scoped lang="css">
.level .el-progress--line {
  margin-bottom: 15px;
  width: 200px;
  display: flex;
  align-items: center;
  margin-top: 4px;
}

/* 简历 */
.preview .resume {
  width: 820px;
  display: flex;
  /* box-shadow: 8px 1px 10px #d8d8d8;
  margin: 50px auto; */
  border: 0.5px solid #254665;
  height: 800px;
}

.preview .resume .wrapper>.title {
  border-bottom: 1px solid #254665;
  padding: 3px 0;
  font-size: 22px;
}

/* 简历左边信息 */
.preview .resume .left {
  width: 270px;
  background-color: #254665;
  color: #FFFFFF;
}

.preview .resume .left .wrapper {
  padding: 0 30px;
  border: 1px solid #254665;
}

.preview .resume .left .image-wrapper {
  width: 120px;
  height: 150px;
  border: 2px solid #FFFFFF;
  background-color: #FFFFFF;
  margin: 60px auto 0;
}

.preview .resume .left .image-wrapper img {
  width: 120px;
  height: 150px;
}

.preview .resume .left .base-info {
  display: flex;
  flex-direction: column;
  padding: 30px;
}

.preview .resume .left .base-info span {
  margin: 6px 0;
}

.preview .resume .left .specialty .list .item {
  margin-bottom: 12px;
}

.preview .resume .left .specialty {
  /* display: flex; */
  align-items: center;
  margin-top: 4px;
}

.preview .resume .left .specialty .level>span {
  width: 60px;
  text-align: center;
}

.preview .resume .left .specialty .progress-wrapper {
  width: calc(100% - 60px);
  height: 10px;
}

/* 简历右边信息 */
.preview .resume .right {
  flex: 1;
  color: #254665;
  padding: 20px 20px 30px 20px;
}

.preview .resume .right .list .item:not(:first-child) {
  margin-top: 20px;
}

.preview .resume .right .list .item .title {
  margin: 4px 0;
}

.preview .resume .right .list .item .title>span {
  margin-right: 40px;
}

.preview .resume .right .wrapper {
  /* border: 1px solid #FFFFFF; */
  height: 90px;
}

.wrapper {
  margin: 10px 0;
}

.preview .resume .right .name-wrapper {
  display: flex;
  vertical-align: bottom;
  align-items: baseline;
  margin: 8px 0;
  /* border: 1px solid #FFFFFF; */
  /* font-size: 32px; */
  line-height: 50px;
}

.preview .resume .right .name-wrapper h1 {
  font-weight: normal;
  margin: 0;
  font-size: 40px;
}

.preview .resume .right .name-wrapper span {
  font-size: 15px;
  height: 20px;
  margin-left: 16px;
  color: #7a7a7a;
}

.preview .resume .right .job-intention .intention>span {
  margin-right: 24px;

}

.intention {
  margin: 15px 0;
}

.list {
  margin: 15px 0;
}

.preview .resume .right .education .item .desc,
.preview .resume .right .projects .item .desc,
.preview .resume .right .honors .honor,
.preview .resume .right .self-evaluation .evaluation,
.preview .resume .right .internship .item .desc {
  color: #8c8c8c;
  font-size: 14px;
}

.preview .resume .right .honors .honor {
  margin: 2px 0;
}

.preview .resume .right .internship .item ul li {
  list-style: disc;
  margin: 4px 0 0 20px;
}
</style>